<template>
  <div>
    <el-drawer v-model="drawer" :title="$t('setting.System settings')" :with-header="true" :modal="true" size="25%" @close="setting.setSettingDrawer(false)">
      <el-divider>{{ $t('setting.Global configuration') }}</el-divider>
      <el-row justify="space-between" class="row-item">
        <el-col :span="18">{{ $t('setting.Theme Mode') }}</el-col>
        <el-col :span="4"><Theme /></el-col>
      </el-row>
      <el-row justify="space-between" class="row-item">
        <el-col :span="18">{{ $t('setting.Switching Chinese and English') }}</el-col>
        <el-col :span="4"><Language /></el-col>
      </el-row>
      <el-row justify="space-between" class="row-item">
        <el-col :span="18">{{ $t('setting.Menu main color tone') }}</el-col>
        <el-col :span="4"><el-color-picker v-model="allSetting.mainColorTone" @change="setting.setMainColorTone" show-alpha /></el-col>
      </el-row>
      <el-row justify="space-between" class="row-item">
        <el-col :span="12">{{ $t('setting.Routing mode') }}</el-col>
        <el-col :span="12" style="text-align: center">
          <el-radio-group v-model="allSetting.routingMode" size="small" @change="setting.setRoutingMode">
            <el-radio-button :label="$t('setting.back-end')" value="back-end" />
            <el-radio-button :label="$t('setting.front-end')" value="front-end" />
            <el-radio-button :label="$t('setting.none')" value="none" />
          </el-radio-group>
        </el-col>
      </el-row>
      <el-divider>{{ $t('setting.Top bar') }}</el-divider>
      <el-row justify="space-between" class="row-item">
        <el-col :span="18">{{ $t('setting.Is it ceiling mounted') }}</el-col>
        <el-col :span="4">
          <el-switch v-model="allSetting.isCeiling" @change="setting.setIsCeiling" />
        </el-col>
      </el-row>
      <el-row justify="space-between" class="row-item">
        <el-col :span="18">{{ $t('setting.Is the tab displayed') }}</el-col>
        <el-col :span="4">
          <el-switch v-model="allSetting.isShowCard" @change="setting.setIsShowCard" />
        </el-col>
      </el-row>
      <el-row justify="space-between" class="footer" :gutter="20">
        <el-col :span="12">
          <el-popconfirm
            width="200"
            :confirm-button-text="$t('setting.confirm')"
            :cancel-button-text="$t('setting.cancel')"
            :icon="InfoFilled"
            icon-color="#626AEF"
            :title="$t('setting.is Reset')"
            @confirm="getConfirm">
            <template #reference>
              <el-button type="warning" style="width: 100%">{{ $t('setting.Reset') }}</el-button>
            </template>
          </el-popconfirm>
        </el-col>
        <el-col :span="12">
          <el-button type="primary" style="width: 100%" @click="getCopy">{{ $t('setting.Copy Configuration JSON') }}</el-button>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
  import Theme from '@/components/Theme/Theme.vue'
  import Language from '@/components/Language/Language.vue'
  import { settingStore } from '@/stores/modules/setting'
  import type { SettingState } from '@/stores/modules/setting'
  import { InfoFilled } from '@element-plus/icons-vue'
  import { ElMessage } from 'element-plus'
  import { ref, computed } from 'vue'
  import clipboard3 from 'vue-clipboard3'
  const setting = settingStore()
  const allSetting = ref<SettingState>(setting.getAll)
  const drawer = computed({
    get: () => {
      return setting.getSettingDrawer
    },
    set: (val) => {
      setting.setSettingDrawer(val)
    },
  })

  const { toClipboard } = clipboard3()
  const getCopy = async () => {
    try {
      await toClipboard(JSON.stringify(allSetting.value))
      ElMessage({
        type: 'success',
        message: '复制成功!',
      })
    } catch (err) {
      console.error(err)
      ElMessage({
        type: 'error',
        message: '复制失败!',
      })
    }
  }
  const getConfirm = () => {
    window.location.reload()
    localStorage.clear()
  }
</script>

<style lang="scss" scoped>
  .row-item {
    margin-bottom: 10px;
    .el-col-4 {
      text-align: center;
    }
  }
  .footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    border-top: 1px solid var(--el-border-color-light);
    background: var(--el-bg-color);
    padding: 10px;
  }
</style>
